<template>
  <div class="xd-LearningHome-OnlineExams">
    <div class="xt-main-container">
      <el-container class="xd-el-container">
        <el-aside width="16vw" class="xd-el-aside">
          <UserCenterInfo></UserCenterInfo>

          <el-card class="box-card m_t_b_1vw rank-list" shadow="hover" v-if="isLearningServices">
            <div slot="header">
              <div class="tag">学习服务</div>
            </div>
            <div class="grid_div">
              <div @click="switchLearningCommunityType(1)">
                <img src="../../assets/imgs/icon_cjwt.png" />
                <p>常见问题</p>
              </div>
              <div @click="switchLearningCommunityType(2)">
                <img src="../../assets/imgs/icon_email.png" />
                <p>建言献策</p>
              </div>
              <div @click="switchLearningCommunityType(3)">
                <img src="../../assets/imgs/icon_dcwj.png" />
                <p>网上调查</p>
              </div>
              <div @click="switchLearningCommunityType(4)">
                <img src="../../assets/imgs/icon_czzn.png" />
                <p>操作指南</p>
              </div>
              <div @click="switchLearningCommunityType(5)">
                <img src="../../assets/imgs/icon_dfjs.png" />
                <p>常用工具</p>
              </div>
            </div>
          </el-card>

          <el-card class="box-card m_t_b_1vw rank-list" shadow="hover">
            <div slot="header">
              <div class="tag">个人排行榜</div>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                class="btn_more"
                @click="openMore(1)"
              >更多</el-button>
            </div>
            <table border="0" cellpadding="0" cellspacing="0" class="xt_table">
              <thead>
                <th>排名</th>
                <th>姓名</th>
                <th>学分</th>
              </thead>
              <tbody class="text-center">
                <tr v-for="(item, idx) in studentsRank" :key="item.id">
                  <td>
                    <el-badge :value="idx + 1" :type="getBadgeType(idx + 1)"></el-badge>
                  </td>
                  <td>{{item.userName}}</td>
                  <td>{{item.userPoints || item.points}}</td>
                </tr>
              </tbody>
            </table>
          </el-card>

          <el-card class="box-card m_t_b_1vw rank-list" shadow="hover">
            <div slot="header">
              <div class="tag">单位排行榜</div>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                class="btn_more"
                @click="openMore(2)"
              >更多</el-button>
            </div>
            <table border="0" cellpadding="0" cellspacing="0" class="xt_table">
              <thead>
                <th>排名</th>
                <th>单位</th>
                <th>平均学分</th>
              </thead>
              <tbody class="text-center">
                <tr v-for="(item, idx) in unitRank" :key="item.id">
                  <td>
                    <el-badge :value="idx + 1" :type="getBadgeType(idx + 1)"></el-badge>
                  </td>
                  <td>{{item.deptName}}</td>
                  <td>{{item.deptPoints}}</td>
                </tr>
              </tbody>
            </table>
          </el-card>
        </el-aside>

        <el-main class="xd-el-main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
const UserCenterInfo = () => import('@/components/UserCenterInfo')

export default {
  name: 'OnlineExams',
  components: {
    UserCenterInfo
  },
  data() {
    return {
      studentsRank: [],
      unitRank: []
    }
  },
  computed: {
    isLearningServices() {
      return this.$route.path.indexOf('LearningServices') !== -1
    }
  },
  created() {
    this.$store.commit('updateActiveMenu', '/LearningHome/OnlineExams')
    this.getStudentList();
    this.getDeptList();
  },
  // mounted() {
  //   for (let index = 0; index < 5; index++) {
  //     this.studentsRank.push({
  //       id: index,
  //       ranking: (index + 1),
  //       name: '张三' + index,
  //       credits: 50 - index
  //     })
  //     this.unitRank.push({
  //       id: index,
  //       ranking: (index + 1),
  //       name: '教务处' + index,
  //       credits: 50 - index
  //     })
  //   }
  // },
  methods: {
    openMore(flag) {
      const activeMenu = this.$store.state.activeMenu
      if (utils.checkStartExam()) {
        if (activeMenu === '/LearningHome/OnlineExams') {
          this.$notify.error('正在考试中')
        }
        return
      }
      switch (flag) {
        case 1:
          // if (this.$store.state.activeMenu === '/LearningHome/OnlineExams') {
          this.$router.push({ path: '/LearningHome/StudentsRank', query: { activeMenu } })
          // } else {
          //   this.$router.push({ path: '/LearningHome/StudentsRank', query: { activeMenu: '/LearningHome/OnlineExams/LearningServices' } })
          // }
          break;
        case 2:
          this.$router.push({ path: '/LearningHome/DeptRank', query: { activeMenu } })
          break;
      }
    },
    getBadgeType(item) {
      let type = ''
      // switch (item.ranking) {
      switch (item) {
        case 1:
          type = 'success'
          break;
        case 2:
          type = 'danger'
          break;
        case 3:
          type = 'warning'
          break;
        default:
          type = 'info'
          break;
      }
      return type
    },
    getStudentList() {
      utils.post(utils.api.sideRank.student, {}, res => {
        if (res.success) {
          this.studentsRank = res.data
        }
      })
    },
    getDeptList() {
      utils.post(utils.api.sideRank.dept, {}, res => {
        if (res.success) {
          this.unitRank = res.data
        }
      })
    },
    switchLearningCommunityType(type) {
      this.$store.commit('switchLearningCommunityType', type)
    }
  }
}
</script>
<style lang="less">
.xd-LearningHome-OnlineExams {
  .rank-list {
    thead th {
      color: #cb2c21;
      font-size: 0.7vw;
      padding-bottom: 0.6vw;
    }

    tbody tr {
      height: 1.9vw;

      &:nth-child(odd) td {
        background: #fbf2f1;
      }
    }

    tbody td {
      color: #333333;
      font-size: 0.7vw;
    }

    tbody .el-badge {
      display: block;
      width: 25px;
      height: 25px;
      margin: 0 auto;
      .el-badge__content {
        display: block;
        font-size: 0.8vw;
        width: 25px;
        height: 25px;
        line-height: 25px;
        border-radius: 13px;
        padding: 0px;
      }
    }
  }

  .rank-list .el-card__body {
    padding-left: 0px;
    padding-right: 0px;
  }

  .xd-el-main {
    padding-left: 10px;
    padding-right: 10px;
  }

  .xd-el-aside {
    .grid_div {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      text-align: center;
      gap: 30px;
      cursor: pointer;
    }
  }
}
</style>